<template>
  <div class="subPage">
    <div>
        <nav-bar
        :title="'订单详情'"
        position="center"
        color='linear-gradient(90deg, #547BF4 0%, #3F4ADE 100%);'
        :rowColor="'white'"
        :goBack="goBack"
        :isMsg='false'
        fontColor='#fff' ></nav-bar>
    </div>
    <div class="content">
      <div class="topBox">
        <div class="title">
          <span>{{regular_info.status_str}}</span>
          <span v-if="regular_info.status === '10' || regular_info.status==='0'">，剩余{{countDown}}</span>
        </div>

      <!--  0:待支付，  1 、2、 3、 4：已支付   5：订单已取消    6：未付约，7：已退款，8：部分退款，9:医生取消  10:支付中  11:人工办理  12：审核中  13：退费中 -->

        <div class="payDesc" v-if="regular_info.status === '7' || regular_info.status === '10' || regular_info.status==='0'|| regular_info.status==='1' ||regular_info.status==='2' || regular_info.status==='3' || regular_info.status==='4'">
          <span>订单总额  ￥{{regular_info.ordersum}}元</span>
          <span style="margin-left:40rpx" v-if="regular_info.status==='7'">已退款金额  ￥{{regular_info.cancel_value}}元</span>
        </div>
        <div v-if="regular_info.status === '13'" class="payDesc">退费已办理成功,相关款项将在1~3个工作日沿原账户路径退回,请注意查收</div>
        <div v-if="regular_info.status === '12'" class="payDesc">您的退费申请已提交,请等待医生审核</div>
        <div v-if="regular_info.status === '11'" class="payDesc">您的退费申请已通过审核,请前往线下办理</div>
      </div>
      <!-- tab1列表 -->
     <div class="scrollCont">
        <!-- <scroll-view scroll-y="true"  v-if="allOrder.length > 0" :lower-threshold='50' > -->
        <div class="allList">
          <ul>
              <li>
                <div class="initBtm clearfix">
                  <div class="itemLine1" style="padding: 40rpx 0">
                    <p>
                      <span class="doctorName">{{regular_info.regular_name}}</span>
                      <span>
                        {{regular_info.sex}}
                        <span>
                          <span class="xiegang">/</span>
                        </span>
                        {{regular_info.age}}岁
                        <span class="dept">{{regular_info.dept_name}}</span>
                      </span>
                    </p>
                  </div>
                  <div class="btmFlex">
                    <div class="itemBtmFl">
                      <div class="itemLine1 lineTitle">开具医生：</div>
                      <div class="itemLine1 lineTitle">开具时间：</div>
                      <div class="itemLine1 lineTitle">订单编号：</div>
                      <div class="itemLine1 lineTitle">就诊卡号：</div>
                      <div class="itemLine1 lineTitle blueFont" v-if="regular_info.remark&&regular_info.remark.length>0">医生备注：</div>
                    </div>
                    <div class="itemBtmFr clearfix">
                      <div class="itemLine1">
                        <span>{{regular_info.doctor_name}}</span>
                      </div>
                      <div class="clearfix yaoping">
                        <div>{{regular_info.receive_time}}</div>
                      </div>
                      <div class="itemLine1">
                        {{regular_info.orderno}}
                      </div>
                      <div class="itemLine1">
                        {{(regular_info.his_patientcard || regular_info.his_patientcard!==null) ? regular_info.his_patientcard : '-'}}
                      </div>
                      <div class="itemLine1 blueFont" v-if="regular_info.remark&&regular_info.remark.length>0">{{regular_info.remark==null?'':regular_info.remark}}</div>
                    </div>
                  </div>
                </div>
              </li>
              <li v-for="(item, index) in allOrder" :key='index + item' @click="goDetails(item)">
                <div class="initTop clearfix">
                  <div class="fl orderno">{{item.check_item}}</div>
                  <div class="fr">
                    <!-- 待支付 待检查-->
                    <span v-if="item.status == '10' || item.status == '2'" class="status status0">{{item.status_str}}</span>
                    <!-- 待处理-->
                    <!-- <span v-else-if="item.status == '13'" class="status status13">{{item.status_str}}</span> -->
                    <!-- 已完成 已支付 -->
                    <span v-else-if="item.status == '1' || item.status == '3' || item.status == '4' || item.status == '7' || item.status == '8'" class="status status23">{{item.status_str}}</span>
                    <!-- 已失效 订单异常 -->
                    <span v-else-if="item.status == '5'|| item.status == '13'|| item.status == '6' || item.status == '9'" class="status status512">{{item.status_str}}</span>
                    <!-- 其他 -->
                    <span v-else-if="item.status == '0'" ></span>
                    <span v-else class="status status512">{{item.status_str}}</span>
                  </div>
                </div>
                <div class="initBtm clearfix">
                  <div class="fl" style="width:23%">
                    <span class="backEcg checkName">
                      检验检查
                    </span>
                  </div>
                  <div class="fl btmFlex" style="width:75%;margin-top: -14rpx">
                    <div class="itemBtmFl" style="width:35%">
                      <div class="itemLine1 lineTitle">检查项目：</div>
                      <div class="itemLine1 lineTitle">费用金额：</div>
                      <div class="itemLine1 lineTitle" v-if="regular_info.status !=='0' && regular_info.status !=='10'">检查时间：</div>
                    </div>
                    <div class="itemBtmFr clearfix">
                      <div class="itemLine1 yaoping">
                        {{item.check_item}}
                        <!-- <span class="xiegang">/</span>双侧乳腺 -->
                      </div>
                      <div class="clearfix yaoping">
                        ￥{{item.item_sum}}
                      </div>
                      <div class="itemLine1" v-if="regular_info.status !=='0' && regular_info.status !=='10'">
                        {{item.check_time?item.check_time:'请等待工作人员核实时间'}}
                      </div>
                    </div>
                  </div>
                </div>
              </li>
          </ul>
          <div style="height:80rpx" ></div>
        </div>
        <!-- </scroll-view> -->
      </div>
      <div :class="['bottomBox',{'addHeight':ifIphonex}]" v-if="regular_info.status==='0' || regular_info.status==='10' || regular_info.status === '1' || regular_info.status === '2' || regular_info.status === '3' || regular_info.status === '4'">
        <span class="tips" v-if=" regular_info.status === '1' || regular_info.status === '2' || regular_info.status === '3' || regular_info.status === '4'">*检验检查订单有效期三个月,超时申请将被驳回</span>
        <span class="doBtn" @click="goPay" v-if="regular_info.status==='0' || regular_info.status==='10'">去支付</span>
        <span class="doBtn" @click="visible = true" v-if="regular_info.can_refund==1" >申请退款</span>
      </div>
    </div>
    <!-- 支付 -->
    <div class="payModal" v-if="PayFlag">
      <div class="pay_content">
        <div class="title">
          <p>选择支付方式</p>
          <img src="/static/images/close.png" alt @click="PayFlag=false" />
        </div>
        <div>
          <div class="lineItem" @click="iscash = true">
            <p>
              <img src="/static/images/peoson_pay.png" alt class="logo" />
              现金支付
              <span>(支持微信支付)</span>
            </p>
            <img
              :src="iscash?'/static/images/pay_checked.png':'/static/images/pay_notcheck.png'"
              alt
            />
          </div>
          <div class="lineItem" @click="iscash = false" v-if="feePayStatus">
            <p>
              <img src="/static/images/yb_pay.png" alt class="logo" />
              医保支付
              <span>(支持武汉医保)</span>
            </p>
            <img
              :src="iscash?'/static/images/pay_notcheck.png':'/static/images/pay_checked.png'"
              alt
            />
          </div>
          <div class="lineItem">
            处方订单费用：
            <span class="cost">{{orderDetail.prescription_price}}</span>
          </div>
          <div class="lineItem">
            检验检查订单费用：
            <span class="cost">{{orderDetail.check_price}}</span>
          </div>
          <div class="sureBtn">
            <p class="total">
              诊疗费用合计：
              <span>{{orderDetail.sum}}</span>
            </p>
            <p class="tip">支付成功后，您可在诊疗订单、处方、检验、检查模块查看订单状态</p>
            <p class="button" @click="topay">提交</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 申请退款 -->
    <div v-if="visible" class="bg" @click="visible = false">
      <div class="init" @click.stop>
        <div class="initTop">
          退款原因
          <img :src="closeTipsImg" @click="visible = false" />
        </div>
        <div class="initMid">
          <div style="margin-left: 30rpx;">
            <radio-group @change="changeRadio">
              <!-- <radio class="radio" value="0" color="#507BFC">
                <text>临时有事</text>
              </radio>
              <br />
              <radio class="radio" value="1" color="#507BFC">
                <text>不想挂了</text>
              </radio>
              <br /> -->
              <radio class="radio" value="3" color="#507BFC">
                <text>已更改就诊方式 </text>
              </radio>
              <br />
              <radio class="radio" value="4" color="#507BFC">
                <text>开错了 / 开多了</text>
              </radio>
              <br />
              <radio class="radio" value="5" color="#507BFC">
                <text>疾病与检查不符</text>
              </radio>
              <br />
              <radio class="radio" value="6" color="#507BFC">
                <text>个人原因无法到院检查</text>
              </radio>
              <br />
              <radio class="radio lastRadio" value="2" color="#507BFC">
                <text>其他</text>
              </radio>
              <br />
            </radio-group>
          </div>
          <div class="areaDiv clearfix" v-if="reason_code==2">
            <textarea
              placeholder="其他原因"
              disable-default-padding="true"
              maxlength="100"
              :value="reason"
              @input="inputchange"
            />
            <div class="fr" style="color: #CCCCCC; font-size: 30rpx;">{{reason.length}} / 100 字</div>
          </div>
        </div>
        <div class="initBtm" @click="requestRefund">
          <div>提交</div>
        </div>
      </div>
      <i-toast id="toast" />
    </div>
    <div v-if="modelStatus" class="payComfirmModal">
      <div class="sure">
        <div class="title">系统检测到您有待支付的处方订单，请前往填写配送地址</div>
        <div class="btm">
          <div @click="modelStatus = false" class="cancel">取消</div>
          <div @click="sureFinish">继续</div>
        </div>
      </div>
    </div>
    <!-- 自取支付确认 -->
    <div v-if="setOrder" class="payComfirmModal">
      <div class="sure">
        <div class="top fontWeight">诊疗订单通知</div>
        <div class="title2">您有新的诊疗订单，请确认！</div>
        <div class="btm">
          <!-- <div @click="setOrder = false" class="cancel">取消</div> -->
          <div class="backBlue" @click="getnewOrder" >获取新订单</div>
        </div>
      </div>
    </div>
    <!-- 底部支付 -->
    <div class="payOperation" v-if="regular_info.status==='0' && queryInfo.order_type == '1'">
      <div class="payOperation_cancel" @click="cancel" v-if="regular_info.mb_item != '0'">取消订单</div>
      <div class="payOperation_cancel" @click="goPay">支付</div>
    </div>
  </div>
</template>

<script>
  let app = getApp()
  let store = app.store
  import api from '@/api/api'
  import { mapState } from 'vuex'
  import navBar from '@/components/navBar'
  const { $Toast, $Message } = require('../../../../../static/iview/base/index')
  export default {
    components: {
      navBar
    },
    computed: {
      ...mapState([
        'ifIphonex', 'talkInfo'
      ])
    },
    data () {
      return {
        page: 1,
        allOrder: [],
        info: {},
        noDataImg: '',
        imgUrl: '',
        regular_id: 0,
        queryInfo: {},
        regular_info: {},
        iscash: true,
        PayFlag: false,
        orderDetail: {},
        countDown: '',
        visible: false,
        timer: {},
        reason_code: '',
        reason: '',
        closeTipsImg: '',
        modelStatus: false,
        feePayStatus: false, // 是否有医保支付这个选项
        setOrder: false,
      }
    },
    onShow(){
      this.modelStatus = false
      this.PayFlag = false
      this.visible = false
    },
    onLoad(options){
      Object.assign(this.$data, this.$options.data()) // 初始化data 中的数据
      this.queryInfo = options
      this.allOrder = []
      this.info = this.$storage.getAccountInfo()
      this.queryPrescriptionList()
    },
    onUnload() {
      clearInterval(this.timer)
      this.PayFlag = false
      this.visible = false
      this.countDown = ''
    },
    mounted () {
      this.imgUrl = api.imgUrl
      this.noDataImg = this.imgUrl + 'noData.png'
      this.closeTipsImg = this.imgUrl + "closeTips.png";
    },
    methods: {
      // 获取新订单
      getnewOrder() {
        this.setOrder = false
        this.PayFlag = false
        // this.getDetails()
        this.$router.go(-1)
        // this.$router.replace(`/pages/center/child/prescriptionOrder/main`)
      },
      // 取消套餐包
      cancel() {
        let that = this
        wx.showModal({
          title: '取消',
          content: '确认取消订单吗？',
          success:( (res) => {
          if(res.confirm) {
            that.$api.cancelSetMeal({order_id:that.regular_info.order_id}, { showLoading: true }).then( (res => {
             if(!res.code) {
              wx.showToast({
                 title: '取消成功',
                 icon: 'success',
                 success: ( (res) => {
                    // that.$router.go(-1)
                     that.queryPrescriptionList()
                 })
               })
             }
           }))
          }
          })
        })

      },
      // 去支付
      goPay (item) {
        this.iscash = true
        //  获取订单信息， 校验是否包含处方订单
        this.$api.pay_hint({order_no:this.regular_info.orderno}, { showLoading: true }).then(res => {
          this.orderDetail = res.data;
          if(res.data.to_prescription_detail) {  // 包含处方需要填写地址 --普通患者
            this.modelStatus = true
          } else {
            this.PayFlag = true;
          }
        });
      },
      goBack() {
        this.$router.go(-1)
      },
      sureFinish() {
        this.$router.push(`/pages/center/child/prescriptionDetails/main?orderno=${this.regular_info.orderno}&pay=${this.regular_info.ordersum}&type=1&orderId=${this.regular_info.order_id}`)
      },
      // 检验检查 直接支付
    async  topay() {
        // 检测支付订单与实际订单做对比
        let result = await this.$api.orderPayWechatMini({ order_id: this.regular_info.order_id },{ showLoading: true })
        if(result.msg.indexOf("您有新的诊疗订单") > -1) {
          this.setOrder = true
          return
        }
        var that = this;
        if (this.iscash) {
          that.$storage.setCardeStatus(3);
          this.$router.push(
            `/pages/center/child/pay/main?orderId=${that.regular_info.order_id}&sum=${
              this.orderDetail.sum
            }&way=1`
          );
        } else {
          that.$api.get_user_info("", { showLoading: true }).then(function(res) {
            var userInfo = res.data[0];
            console.log("userInfo.insurance_card", userInfo.insurance_card);
            if (userInfo.insurance_card) {
              that.$storage.setCardeStatus(3);
              that.$router.push(
                `/pages/center/child/pay/main?orderId=${that.regular_info.order_id }&sum=${
                  that.orderDetail.sum
                }&way=2`
              );
            } else {
              that.$storage.setCardeStatus(4);
              that.$router.push(
                `/pages/center/child/makeSure/main?orderId=${that.regular_info.order_id }&sum=${
                  that.orderDetail.sum
                }`
              );
            }
          });
        }
        // this.nowOrderId = ''
      },
      goDetails (data) {
        this.$router.push({
          path: '/pages/center/child/checkDetails/main',
          query: {
            order_no: this.regular_info.orderno,
            regular_id: this.regular_info.regular_id,
            item_code: data.item_code
          }
        })
      },
      // 查询全部信息
      queryPrescriptionList () {
        let that = this
        let param = that.queryInfo
        this.$api.inspectionCheckOrderSecond(param, {'showLoading': true}).then(res => {
          let list = res.data.check_list
          that.regular_info = res.data.regular_info
          that.regular_info.receive_time = that.$utils.filterTime(that.regular_info.receive_time, 8)
          let t = (that.regular_info.overdue_time * 1000) - new Date().getTime()  // 剩余时间减去当前时间错
          let day = Math.floor(t / 86400000);
          let hour = Math.floor((t / 3600000) % 24);
          let min = Math.floor((t / 60000) % 60);
          let sec = Math.floor((t / 1000) % 60);
          hour = hour < 10 ? "0" + hour : hour;
          min = min < 10 ? "0" + min : min;
          sec = sec < 10 ? "0" + sec : sec;
          let format = '';
          if (day > 0) {
            format = `${day}天${hour}时${min}分${sec}秒`;
          }
          if (day <= 0 && hour > 0) {
            format = `${hour}时${min}分${sec}秒`;
          }
          if (day <= 0 && hour <= 0) {
            format = `${min}分${sec}秒`;
          }
          that.countDown = format
          that.timer = setInterval(function() {
            t -= 1000
            if (t > 0) {
              let day = Math.floor(t / 86400000);
              let hour = Math.floor((t / 3600000) % 24);
              let min = Math.floor((t / 60000) % 60);
              let sec = Math.floor((t / 1000) % 60);
              hour = hour < 10 ? "0" + hour : hour;
              min = min < 10 ? "0" + min : min;
              sec = sec < 10 ? "0" + sec : sec;
              let format = '';
              if (day > 0) {
                format = `${day}天${hour}时${min}分${sec}秒`;
              }
              if (day <= 0 && hour > 0) {
                format = `${hour}时${min}分${sec}秒`;
              }
              if (day <= 0 && hour <= 0) {
                format = `${min}分${sec}秒`;
              }
              if (day ==0 && hour == 0 && min == 0 && sec == '00') {
                console.log('剩余支付时间到了')
              }
              that.countDown = format
              // that.$set(that.countDown, format)
            } else {
            }
          }, 1000)

          that.allOrder = list
        }).then(res => {
          that.$api.user_regular_list("", { showLoading: true }).then( (res)=> {
            for (let i = 0; i < res.data.length; i++) {
              if (that.regular_info.regular_id == res.data[i].regular_id) {
                if (res.data[i].fee_type_code == 'WHA01') {
                  that.feePayStatus = true
                  return
                }
              }
            }
            that.feePayStatus = false
          })
        })
      },
      // 修改退款原因
      changeRadio(e) {
        console.log(e.mp.detail.value);
        this.reason_code = e.mp.detail.value;
      },
      // 文本框改变
      inputchange(e) {
        let stringStr = e.target.value.substring(0, 1);
        this.reason = e.target.value;
        if (stringStr == " ") {
          this.reason = this.reason.substring(1, this.reason.length);
        }
      },
      //确定退款
      requestRefund() {
        var that = this;
        let data = {
          order_id: that.regular_info.order_id,
          cancel_reason_code: that.reason_code,
          reason_text: that.reason
        };
        that.$api.requestRefund(data, { showLoading: true })
        .then(res => {
          that.visible = false
          setTimeout(() => {
            that.allOrder = []
            that.queryPrescriptionList()
            setTimeout(() => {
              that.$utils.showToast('text', '申请成功')
            }, 800);
          }, 500);
        })
        .catch(res=>{
          that.visible = false
          setTimeout(() => {
            that.allOrder = []
            that.queryPrescriptionList()
            that.$utils.showToast('text', '申请失败请稍后再试')
          }, 1000);
        })
      },
    }
  }
</script>

<style scoped lang='less'>
.payOperation{
  position: absolute;
  bottom: 0px;
  left: 0px;
  width:100%;
  background: #FFFFFF;
  box-shadow: 1px 0px 4px 0px #CCCCCC;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding:15px;
  box-sizing: border-box;
  .payOperation_cancel{
    padding:8px 20px;
    text-align: center;
    border-radius: 36px;
    border:1px solid #ADADAD;
    font-size: 16px;
    color: #666666;
    margin: 0px 8px;
  }
}
.subPage {
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .subTop {
    // border-top: 1rpx solid #DDDDDD;
    // border-bottom: 1rpx solid #DDDDDD;
    height: 42px;
  }
  .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden ;
    position: relative;
    background: url('../../../../../static/images/background2.png') no-repeat 0 0 ;
    background-size: 100% 318rpx;
    background-color: #F9F9F9;
    .scrollCont {
      flex: 1;
      overflow-x: hidden;
      overflow-y: scroll;
    }
    .scrollCont::-webkit-scrollbar {
      display:none
    }
    .topBox {
      min-height: 174rpx;
      padding-bottom: 20rpx;
      color:rgba(255,255,255,1);
      padding-left: 68rpx;
      box-sizing: border-box;
      .title {
        font-size:40rpx;
        font-weight:500;
        font-weight: 500;
        margin-top: 50rpx;
        margin-bottom: 10rpx;
      }
      .payDesc {
        font-size:28rpx;
        font-weight:400
      }
    }
    .allList {
      height: 100%;
      margin: 0rpx 30rpx;
      transform: translateY(-30rpx);
      // padding-top: 20rpx;
      ul {
        width: 100%;
        height: 100%;
        li {
          /* height:516rpx; */
          background:rgba(255,255,255,1);
          box-shadow:0rpx 2rpx 12rpx 1rpx rgba(0,0,0,0.11);
          border-radius:16rpx;
          background: #fff;
          margin-bottom: 30rpx;
          box-sizing: border-box;
          padding-bottom: 2rpx;
          .initTop {
            height: 71rpx;
            border-bottom: 1rpx solid #E9E9E9;
            padding: 0 25rpx 0 27rpx;
            .orderno {
              font-size:28rpx;
              color: #666666;
              margin-top: 17rpx;
              overflow: hidden;
              width: 73%;
              text-overflow:ellipsis;
              white-space: nowrap;
            }
            .status {
              font-size:28rpx;
              height: 50rpx;
              line-height: 50rpx;
              padding: 0 20rpx;
              border-radius:25rpx;
              display: inline-block;
              margin-top: 10rpx;
            }
            .status236 {
              background: #EBF5FF;
              color: #258FF8;
            }
            .status0 {
              background: #FFf5EE;
              color: #FF7F29;
            }
            .status13 {
              background: #FFF5EE;
              color: #FF7F29;
            }
            .status23 {
              background: #EBF5FF;
              color: #258FF8;
            }
            .status512 {
              background: #FFE9E9;
              color: #F82625;
            }
            .statuselse {
              background: #DDFFED;
              color: #10C15B;
            }
          }
          .initBtm {
            margin: 39rpx 25rpx 28rpx 34rpx;
            .itemLine1 {
              min-height: 61rpx;
              line-height: 61rpx;
              overflow: hidden;
            }
            .checkName {
              display: inline-block;
              width:118rpx;
              height:118rpx;
              border-radius:10rpx;
              color: #fff;
              // line-height: 118rpx;
              text-align: center;
              padding: 24rpx;
              box-sizing: border-box;
              font-weight: 700;
              line-height: 38rpx;
            }
            .backEcg {
              // background:rgba(45,198,255,1);
              background-color: rgb(84, 158, 255);
            }
            .shengyu {
              color: #FF7F29;
            }
            .xiegang {
              display: inline-block;
              color: #CCCCCC;
              margin: 0 10rpx;
            }
            .dept {
              float: right;
              margin-right: 16rpx;
            }
            .doctorName {
              display: inline-block;
              margin-right: 35rpx;
              font-size: 44rpx;
              font-weight: bold;
              color: rgba(74, 113, 232, 1);
            }
            .btmFlex {
              display: flex;
              .itemBtmFl {
                width: 160rpx;
                // width: 33%;
                overflow: hidden;
                .lineTitle {
                  font-size: 32rpx;
                  font-weight: 400;
                  color: rgba(102, 102, 102, 1);
                  width: 160rpx;
                }
                .blueFont {
                  color: rgba(74, 113, 232, 1);
                }
              }
              .itemBtmFr {
                // margin-left: 6rpx;
                width: 67%;
                font-size: 32rpx;
                flex: 1;
                color: #333;
                font-size: 32rpx;
                // width: 100%;
                // overflow: hidden;
                .yaoping {
                  width: 100%;
                  height: 60rpx;
                  line-height: 60rpx;
                  overflow: hidden;
                  text-overflow:ellipsis;
                  white-space: nowrap;
                  div:nth-child(1) {
                    width: 75%;
                    height:60rpx;
                    text-overflow:ellipsis;
                    word-break: break-all;
                    text-overflow:ellipsis;
                    overflow:hidden;
                  }
                  div:nth-child(2) {
                    width: 25%;
                  }
                }
              }
            }
          }
          .do {
            margin-top: 16rpx;
            .doBtn {
              height: 76rpx;
              line-height: 76rpx;
              font-size:32rpx;
              border: 1rpx solid #ADADAD;
              border-radius:38rpx;
              padding: 0 50rpx;
              color: #666;
              margin-bottom: 28rpx;
            }
            .look {
              margin-left: 20rpx;
            }
          }
        }
        li:last-child {
          // margin-bottom: 0!important;
        }
      }
    }
    .bottomBox  {
      background-color: #fff;
      box-sizing: border-box;
      height: 110rpx;
      padding: 20rpx;
      box-shadow:1px 0px 4px 0px rgba(204,204,204,1);
      .tips {
        float: left;
        height: 76rpx;
        line-height: 76rpx;
        margin-left: 20rpx;
        min-width: 500rpx;
        color:rgba(74,113,232,1);
        font-size:24rpx;
       }
       .doBtn {
         float: right;
         width: 174rpx;
         height: 76rpx;
         line-height: 76rpx;
         font-size:32rpx;
         border: 1rpx solid #ADADAD;
         border-radius:38rpx;
         text-align: center;
         color: #666;
       }
    }
    .addHeight {
      height: 150rpx;
    }
  }
  .payModal {
    position: absolute;
    top: 0;
    left: 0;
    // bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 99999;
    .pay_content {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 850rpx;
      background-color: #fff;
      .title {
        width: 100%;
        height: 90rpx;
        border-bottom: 1rpx solid #e9e9e9;
        color: #333;
        font-size: 34rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        text-align: center;
        line-height: 90rpx;
        display: flex;
        p {
          flex: 1;
          color: #333;
          font-size: 32rpx;
        }
        img {
          width: 45rpx;
          height: 45rpx;
          margin: 20rpx 20rpx 0 0;
          display: inline-block;
        }
      }
      .lineItem {
        width: 100%;
        height: 100rpx;
        border-bottom: 1rpx solid #e9e9e9;
        display: flex;
        flex-direction: row;
        align-items: center;
        box-sizing: border-box;
        padding-left: 30rpx;
        color: #666;
        .cost {
          color: #333;
        }
        p {
          flex: 1;
          display: flex;
          flex-direction: row;
          align-items: center;
          color: #333;
          img {
            margin-left: 0;
          }
          span {
            color: #999;
            font-size: 28rpx;
          }
        }
        img {
          width: 50rpx;
          height: 50rpx;
          margin: 0 30rpx;
        }
      }
      .sureBtn {
        padding:0 30rpx;
        box-sizing: border-box;
        color: #666;
        .total {
          margin: 30rpx 0;
          span {
            color: #ff5453;
            font-size: 36rpx;
          }
        }
        .tip {
          margin: 10rpx 30rpx 50rpx 0;
          font-size: 26rpx;
          color: rgba(153, 153, 153, 1);
        }
        .button {
          // width: 660rpx;
          height: 92rpx;
          background: rgba(74, 100, 234, 1);
          line-height: 92rpx;
          text-align: center;
          color: #fff;
          border-radius: 46rpx;
        }
      }
    }
  }
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.7);
    .init {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      min-height: 660rpx;
      overflow: hidden;
      background: #fff;
      z-index: 2;
      display: flex;
      flex-direction: column;
      .initTop {
        height: 90rpx;
        line-height: 90rpx;
        font-size: 34rpx;
        font-weight: bold;
        text-align: center;
        position: relative;
        border-bottom: 2rpx solid #e9e9e9;
        img {
          width: 45rpx;
          height: 45rpx;
          position: absolute;
          top: 26rpx;
          right: 20rpx;
        }
      }
      .initMid {
        flex: 1;
        .areaDiv {
          border-top: 1rpx solid #e9e9e9;
          border-bottom: 1rpx solid #e9e9e9;
          height: 110rpx;
          padding: 25rpx 30rpx;
        }
        .radio {
          margin-top: 30rpx;
        }
        .lastRadio {
          margin-bottom: 30rpx;
        }
        textarea {
          height: 80rpx;
          width: 100%;
        }
      }
      .initBtm {
        height: 160rpx;
        padding: 0rpx 45rpx 0 45rpx;
        div {
          margin-top: 20rpx;
          width: 100%;
          height: 100rpx;
          line-height: 90rpx;
          background: #4a64ea;
          border-radius: 46px;
          text-align: center;
          font-size: 32rpx;
          color: #fff;
          font-weight: bold;
        }
      }
    }
  }
  .payComfirmModal {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999999;
    .sure {
      z-index: 2;
      width: 650rpx;
      height: 410rpx;
      overflow: hidden;
      background: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -325rpx;
      margin-top: -205rpx;
      border-radius: 8rpx;
      display: flex;
      flex-direction: column;
      font-size: 34rpx;
      .top {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .fontWeight{
        font-weight: bold;
      }
      .title {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 40rpx;
        padding: 0 30rpx;
      }
      .title2{
        flex: 1;
        display: flex;
        // align-items: center;
        justify-content: center;
        // margin-top: 20rpx;
        padding: 0 30rpx;
      }
      .topTips {
        flex: 1;
        margin: 136rpx 100rpx 0 99rpx;
      }
      .btm {
        height: 100rpx;
        display: flex;
        div {
          flex: 1;
          line-height: 100rpx;
          text-align: center;
          background: #f7f8fa;
        }
        div:nth-child(2) {
          background:#4A64EA;
          color: #fff;
        }
        .backBlue {
          background:#4A64EA;
          color: #fff;
        }
      }
    }
  }
  .blueFont {
    color: rgba(74, 113, 232, 1);
  }
</style>
